<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding: 0;
				list-style: none;
			}
			div{
				width: 300px;
				height: 200px;
				border: 1px solid red;
			}
			input{
				
				width: 100px;
				height: 40px;
				float: left;
			}
			ul{
				width: 300px;
				height: 160px;
				margin-top: 40px;
				background-color: red;
				text-align: center;
				line-height: 140px;
				font-size: 50px;
				color: blue;
			}
			ul li{
				display: none;
			}
			.show{
				display: block;
			}
			.active{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<input type="button" value="按钮1" class="active"/>
		    <input type="button" value="按钮2"/>
		    <input type="button" value="按钮3"/>
		    <ul class="tab">
			    <li class="show">1</li>
			    <li>2</li>
			    <li>3</li>
		    </ul>
		</div>
		<button id="btn1">左</button>
		<button id="btn2">右</button>
	</body>
	<script type="text/javascript">
	         window.onload=function(){
	         	var oBtn=document.querySelectorAll('input');
	         	var oLI=document.querySelectorAll('.tab li');
	         	var oBtn1=document.getElementById('btn1')
	         	var oBtn2=document.getElementById('btn2')
	         	for(let i=0;i<oBtn.length;i++){
	         		oBtn[i].onclick=function(){
	         			for(var j=0;j<oLI.length;j++){
	         				oLI[j].className=''
	         				oBtn[j].className=''
	         				oBtn1.onclick=function(){
	         					oLI.style.lef=-300+'px'
	         				}
	         			}
	         			this.className='active';
	         			oLI[i].className='show'
	         		}
	         	}
	         }
	</script>
</html>
